import {View} from '@tarojs/components';
import Icon from 'components/Icon'
import s from './index.module.scss'
import Taro from '@tarojs/taro';
import classNames from 'classnames';

interface ListRowProps {
  className?: string,
  title: string,
  onClick?: () => any,
  style?: any,
  icon?: string,
  path?: string
}

function ListRow(props: ListRowProps) {
  const {title, onClick, icon, style, className = ''} = props

  function clickhandler() {
    if (props.path) {
      Taro.navigateTo({ url: props.path })
    }
    onClick && onClick()
  }

  const __container = classNames(s.container, {
    [className]: !!className
  })

  return (
    <View className={__container} onClick={clickhandler} style={style}>
      <View className={s.entry}>
        <View className={s.left}>
          {icon && <Icon className={s.icon} name={icon} size={20} />}
          <View className={s.title}>{title}</View>
        </View>
        <View className={s.right}>
          <Icon name='chevron-up' size={26} style={{transform: 'rotate(90deg)'}} />
        </View>
      </View>
    </View>
  )
}

export default ListRow